<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>HTML5 Ajax Contact Form - Magnis</title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,400italic,700,700italic,300,300italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Euphoria+Script' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" media="screen" href="assets-newsletters/css/quick_newsletter.css"> 
<link rel="stylesheet" type="text/css" href="css/tango/skin.css" />
<link rel="stylesheet" href="assets-html5-contact-form/css/contact.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/responsive.css" />
<link rel="stylesheet" href="css/color-01.css" id="site-color" />
<!--[if IE]>
<link rel="stylesheet" href="./css/ie-style.css" />
<![endif]-->
</head>

<body>

<!-- header start //-->

<div class="container">
	<div class="row">
		<div class="span5">
        	<!-- site logo	//-->
                	<a href="index.html">
        	<div class="site-logo">magnis</div></a>

            <!-- site description //-->
            <div class="site-desc">Magnis is a HTML5/CSS3 template for corporate and portfolio sites.</div>
        </div>
        <div class="span7">
        	<!-- header social buttons //-->
        	<div class="header-social-buttons">
            	<a href="#"><i class="icon-facebook"></i></a>
            	<a href="#"><i class="icon-twitter"></i></a>
            	<a href="#"><i class="icon-rss"></i></a>
            </div>
            <!-- header contacts //-->
            <div class="header-contacts hidden-phone visible-tablet visible-desktop">
            	<p><span class="contact-1">Call us: </span><i class="icon-phone hidden-desktop visible-tablet"></i><strong>+1 234 56 78</strong></p>
                <p><span class="contact-2">Email us: </span><i class="icon-envelope hidden-desktop visible-tablet"></i><a href="#">sample@company.com</a></p>
            </div>
            <!-- site desktop menu start //-->
            <nav class="site-desktop-menu">
            	<ul>
                	<li>
                    	<a href="index.html">home</a>
                        <ul>
                        	<li><a href="index.html">layout 1</a></li>
                        	<li><a href="index-2.html">layout 2</a></li>
                        	<li><a href="index-3.html">layout 3</a></li>
                        </ul>
                    </li>
                	<li>
                    	<a href="#">features</a>
                        <ul>
                        	<li><a href="#">Layer Slider</a></li>
                            <li><a href="#">Flexslider</a></li>
                        	<li><a href="#">HTML5 Ajax Contact</a></li>
                            <li><a href="#">Free JCarousel</a></li>
                            <li><a href="#">jQuery Lightbox</li>
                            <li><a href="#">Dynamic Countdown</a></li>
                            <li><a href="#">Sort anything you want</a></li>
                            <li><a href="#">Toggle and Tabs</a></li>
                            <li><a href="#">Newsletters Subscription</a></li>
                        </ul>
					</li>
                	<li><a href="#">pages</a>
                    	<ul>
                        	<li><a href="about.html">about</a></li>
                        	<li><a href="services.html">services</a></li>
                        	<li><a href="left-sidebar.html">left sidebar</a></li>
                        	<li><a href="right-sidebar.html">right sidebar</a></li>
                        	<li><a href="full-width.html">full width</a></li>
                        	<li><a href="pricing.html">pricing tables</a></li>
                        	<li><a href="404.html">404 error</a></li>
                        	<li><a href="faq.html">FAQ</a></li>
                        	<li><a href="soon.html">Coming soon</a></li>
                        	<li><a href="elements.html">elements</a></li>
                        	<li><a href="typography.html">typography</a></li>
                        </ul>
                    </li>
                    <li>
                    	<a href="shop.html">Shop</a>
                        <ul>
                        	<li><a href="shop.html">Catelog page</a></li>
                        	<li><a href="shop-cart.html">Shopping cart</a></li>
                        	<li><a href="shop-product.html">Single product</a></li>
                        	<li><a href="shop-checkout.html">Checkout page</a></li>
                        </ul>
                    </li>
                	<li>
                    	<a href="#">portfolio</a>
                        <ul>
                        	<li><a href="portfolio-3.html">3 columns</a></li>
                        	<li><a href="portfolio-4.html">4 columns</a></li>
                        	<li><a href="portfolio-5.html">5 columns</a></li>
                        	<li><a href="portfolio-single.html">single project</a></li>
                        </ul>
                    </li>
                	<li>
                    	<a href="#">blog</a>
                        <ul>
                        	<li><a href="blog.html">blog page</a></li>
                            <li><a href="blog-single.html">Blog article</a></li>
                        </ul>
                    </li>
                	<li>
                    	<a href="#">contacts</a>
                        <ul>
                                                	<li><a href="contacts.html">contact form</a></li>
                        	<li><a href="contacts-html5.html">HTML5 Ajax Contact</a></li>

                        </ul>
                    </li>
                </ul>
        </nav>
            <!-- site desktop menu end //-->
            <!-- site desktop menu start //-->
            <nav class="site-mobile-menu">
            	<i class="icon-reorder"></i>
            	<ul>
                	<li>
                    	<a href="index.html">home</a>
                        <ul>
                        	<li><a href="index.html">layout 1</a></li>
                        	<li><a href="index-2.html">layout 2</a></li>
                        	<li><a href="index-3.html">layout 3</a></li>
                        </ul>
                    </li>
                	<li>
                    	<a href="#">features</a>
                        <ul>
                        	<li><a href="#">Layer Slider</a></li>
                            <li><a href="#">Flexslider</a></li>
                        	<li><a href="#">HTML5 Ajax Contact</a></li>
                            <li><a href="#">Free JCarousel</a></li>
                            <li><a href="#">jQuery Lightbox</li>
                            <li><a href="#">Dynamic Countdown</a></li>
                            <li><a href="#">Sort anything you want</a></li>
                            <li><a href="#">Toggle and Tabs</a></li>
                            <li><a href="#">Newsletters Subscription</a></li>
                        </ul>
					</li>
                	<li><a href="#">pages</a>
                    	<ul>
                        	<li><a href="about.html">about</a></li>
                        	<li><a href="services.html">services</a></li>
                        	<li><a href="left-sidebar.html">left sidebar</a></li>
                        	<li><a href="right-sidebar.html">right sidebar</a></li>
                        	<li><a href="full-width.html">full width</a></li>
                        	<li><a href="pricing.html">pricing tables</a></li>
                        	<li><a href="404.html">404 error</a></li>
                        	<li><a href="faq.html">FAQ</a></li>
                        	<li><a href="soon.html">Coming soon</a></li>
                        	<li><a href="elements.html">elements</a></li>
                        	<li><a href="typography.html">typography</a></li>
                        </ul>
                    </li>
                    <li>
                    	<a href="shop.html">Shop</a>
                        <ul>
                        	<li><a href="shop.html">Catelog page</a></li>
                        	<li><a href="shop-cart.html">Shopping cart</a></li>
                        	<li><a href="shop-product.html">Single product</a></li>
                        	<li><a href="shop-checkout.html">Checkout page</a></li>
                        </ul>
                    </li>
                	<li>
                    	<a href="#">portfolio</a>
                        <ul>
                        	<li><a href="portfolio-3.html">3 columns</a></li>
                        	<li><a href="portfolio-4.html">4 columns</a></li>
                        	<li><a href="portfolio-5.html">5 columns</a></li>
                        	<li><a href="portfolio-single.html">single project</a></li>
                        </ul>
                    </li>
                	<li>
                    	<a href="#">blog</a>
                        <ul>
                        	<li><a href="blog.html">blog page</a></li>
                            <li><a href="blog-single.html">Blog article</a></li>
                        </ul>
                    </li>
                	<li>
                    	<a href="#">contacts</a>
                        <ul>
                                                	<li><a href="contacts.html">contact form</a></li>
                        	<li><a href="contacts-html5.html">HTML5 Ajax Contact</a></li>

                        </ul>
                    </li>
                </ul>
        </nav>
            <!-- site desktop menu end //-->
        </div>
    </div>
</div>

<div class="gray-line"></div>

<!-- header end //-->

<!-- page header start //-->
<div class="page-header pattern-bg">
	<div class="container">
    	<div class="row">
        	<div class="span6">
            	<h2>HTML5 Ajax Contact Form</h2>
            </div>
            <div class="span6">
            	<p><a href="#">home</a> <i class="icon-angle-right"></i> HTML5 Ajax Contact Form</p>
            </div>
        </div>
    </div>
</div>
<!-- page header end //-->

<!-- main content start //-->
<div class="main-content">
	<div class="container">
    	<div class="row">
        
        	<div class="span9">
            	<div class="main-content-block html5-contact-form">
	<section id="contact">
		<mark id="message"></mark>

		<form method="post" action="http://rivathemes.com/html/magnis/classes/contact.php" name="contactform" id="contactform" autocomplete="on">

			<fieldset>

				<legend>Contact Details</legend>

				<div>
					<label for="name" accesskey="U">Your Name</label>
					<input name="name" type="text" id="name" placeholder="Enter your name" required="required" />
				</div>
				<div>
					<label for="email" accesskey="E">Email</label>
					<input name="email" type="email" id="email" placeholder="Enter your Email Address" pattern="^[A-Za-z0-9](([_\.\-]?[a-zA-Z0-9]+)*)@([A-Za-z0-9]+)(([\.\-]?[a-zA-Z0-9]+)*)\.([A-Za-z]{2,})$" required="required" />
				</div>

				<div>
					<label for="phone" accesskey="P">Phone <small>(optional)</small></label>
					<input name="phone" type="tel" id="phone" size="30" placeholder="Enter your phone number" />
				</div>

				<div>
					<label for="website" accesskey="W">Website <small>(optional)</small></label>
					<input name="website" type="url" id="website" placeholder="Enter your website address" />
				</div>

			</fieldset>

			<fieldset>

				<legend>Your Comments</legend>

				<div>
					<label for="subject" accesskey="S">Subject</label>
					<select name="subject" id="subject" required="required">
						<option value=""></option>
						<option value="Support">Support</option>
						<option value="A Sale">Sales</option>
						<option value="A Bug fix">Report a bug</option>
					</select>
				</div>

				<div>
					<label for="comments" accesskey="C">Comments</label>
					<textarea name="comments" cols="40" rows="3" id="comments" placeholder="Enter your comments" spellcheck="true" required="required"></textarea>
				</div>

				<div>
					<label class="radio">
						<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
						Choose option one?
					</label>
				</div>

				<div>
					<label class="radio">
						<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
						Or rather, option two?
					</label>
				</div>

				<div>
					<label for="agree" accesskey="A">Agree to terms</label>
					<input name="agree" type="checkbox" id="agree"/>
				</div>

			</fieldset>

			<fieldset>

				<legend>Are you human?</legend>

				<label for="verify" accesskey="V" class="verify"><img src="classes/image.html" alt="Verification code" /></label>
				<input name="verify" type="text" id="verify" size="6" required="required" style="width: 50px;" title="This confirms you are a human user and not a spam-bot." />

			</fieldset>

			<input type="submit" class="submit" id="submit" value="Submit" />

		</form>
	</section>
                </div>
            </div>
            
            <div class="span3">
				<div class="main-content-block">
                	<h2>general info</h2>
					<div class="main-content-block-entry contact-info">
                    	<p><i class="icon-location-arrow"></i> 1052 – 1054 Christchurch Road, Bournemouth, BH7 6DS</p>
                    	<p><i class="icon-phone"></i> +1 234 56 78</p>
                    	<p><i class="icon-envelope"></i> <a href="#">sample@magnis.com</a></p>
                    	<p><i class="icon-globe"></i> <a href="#">www.magnis.com</a></p>
					</div>
				</div>
				<div class="main-content-block">
                	<h2>working hours</h2>
					<div class="main-content-block-entry contact-info">
                    	<p><i class="icon-time"></i> Monday - Friday: 8 am to 4 pm</p>
                    	<p><i class="icon-time"></i> Saturday: 9 am to 2 pm</p>
                    	<p><i class="icon-remove-sign"></i> Sunday: Closed pm</p>
					</div>
				</div>
            </div>
        
        </div>
    </div>
</div>
<!-- main content end //-->

<!-- google map start //-->
<div id="map-canvas"></div>
<!-- google map end //-->

<!-- footer start //-->
<footer class="site-footer">
	<div class="container">
    	<div class="row">
        	<div class="span3">
            	<div class="footer-widget footer-about">
                	<div class="footer-about-logo">Magnis</div>
                    <p>In id lacinia dolor. Nam lectus quam, ultricies a rutrum in, mattis nec mi. Vestibulum at tempus arcu. Fusce sit amet velit vitae mauris tempus gravida. Nullam at felis a nisl iaculis sodales. Praesent euismod porttitor nibh, et dictum tellus accumsan sed.</p>
                    <p class="soc-icons">
                    	<a href="#"><i class="icon-facebook"></i></a>
                    	<a href="#"><i class="icon-twitter"></i></a>
                    	<a href="#"><i class="icon-linkedin"></i></a>
                    	<a href="#"><i class="icon-google-plus"></i></a>
                    	<a href="#"><i class="icon-rss"></i></a>
                    </p>
                </div>
            </div>
        	<div class="span3">
            	<div class="footer-widget footer-latest-tweets">
	            	<h2>tweets</h2>
                    <ul id="footer-latest-tweets" class="jcarousel-skin-tango">
                    	<li>
                        	<p class="username">@themeforest</p>
                            <p>Aenean molestie adipiscing fringilla. Integer sodales sapien tincidunt velit suscipit dapibus.<br>
<a href="#">http://t.co/dalkr3e</a></p>
                        </li>
                    	<li>
                        	<p class="username">@themeforest</p>
                            <p>Pellentesque nec velit dignissim, hendrerit mi vel, gravida urna. Mauris a blandit quam. Curabitur aliquet augue sit amet neque vehicula varius.<br>
<a href="#">http://t.co/dalkr3e</a></p>
                        </li>
                    	<li>
                        	<p class="username">@themeforest</p>
                            <p>Maecenas iaculis posuere aliquet. <br>
<a href="#">http://t.co/dalkr3e</a></p>
                        </li>
                    </ul>
                </div>
            </div>
        	<div class="span3">
            	<div class="footer-widget footer-filckr">
	            	<h2>flickr photos</h2>
                    <div class="footer-filckr-wrapper">
                		<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=9&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;user=52617155@N08"></script>
					</div>
                </div>
            </div>
        	<div class="span3">
            	<div class="footer-widget footer-contacts">
	            	<h2>contacts</h2>
                    <div class="footer-contacts-wrapper">
                    	<ul>
                        	<li class="li1">address:</li>
                            <li class="li2">1052 – 1054 Christchurch Road, Bournemouth, BH7 6DS</li>
                        	<li class="li1">phone:</li>
                            <li class="li2">+1 234 56 78</li>
                        	<li class="li1">email:</li>
                            <li class="li2"><a href="#">support@example.com</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- footer end //-->

<!-- bottom line start //-->
<div class="bottom-line">
	<div class="container">
    	<div class="row">
        	<div class="span6">
            	<p>© 2013 All rights reserved.  Magnis by <a href="http://themeforest.net/user/suono_libero">Suono Libero</a></p>
            </div>
        	<div class="span6">
            	<p class="bottom-menu"><a href="#">FAQ</a> / <a href="#">Support</a> / <a href="#">Contacts</a></p>
            </div>
        </div>
    </div>
</div>
<!-- bottom line end //-->

<!-- to the top start //-->
<div id="to-the-top"><i class="icon-angle-up"></i></div>
<!-- to the top end //-->

<!-- site settings start //-->
<div class="settings-wrapper">
    <div class="settings-block">
    	<h3>Site color</h2>
        <ul>
        	<li><a href="#" class="c01" data-color="01"></a></li>
        	<li><a href="#" class="c02" data-color="02"></a></li>
        	<li><a href="#" class="c03" data-color="03"></a></li>
        	<li><a href="#" class="c04" data-color="04"></a></li>
        	<li><a href="#" class="c05" data-color="05"></a></li>
        	<li><a href="#" class="c06" data-color="06"></a></li>
        </ul>
    	<h3>Pattern background</h2>
        <ul>
        	<li><a href="#" class="p01" data-pattern="01"></a></li>
        	<li><a href="#" class="p02" data-pattern="02"></a></li>
        	<li><a href="#" class="p03" data-pattern="03"></a></li>
        	<li><a href="#" class="p04" data-pattern="04"></a></li>
        	<li><a href="#" class="p05" data-pattern="05"></a></li>
        	<li><a href="#" class="p06" data-pattern="06"></a></li>
        </ul>
    </div>
	<div class="show-settings"><i class="icon-cog"></i></div>
</div>
<!-- site settings end //-->

</body>

<!-- scripts start //-->
<script src="js/jquery.js"></script>
<script src="js/layerslider.kreaturamedia.jquery.js"></script>
<script src="js/layerslider.transitions.js"></script>
<script src="js/jquery-easing-1.3.js" type="text/javascript"></script>
<script src="js/jquery-transit-modified.js" type="text/javascript"></script>
<script src="js/jquery.jcarousel.min.js"></script>
<script src="assets-html5-contact-form/js/jquery.jigowatt.js"></script>
<script type="text/javascript" src="assets-newsletters/scripts/quick_newsletter.js"></script> 
<script>
jQuery(document).ready(function() {
});
</script>
<script src="js/custom.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;hl=en&amp;sensor=false"></script>
    <script>
var map;
function initialize() {
  var mapOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-37.813611, 144.963056),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
<!-- scripts end //-->

</html>